<template>
  <section class="search-form">
    <el-form ref="searchForm" :inline="true" :model="data" class="demo-form-inline" :label-width="labelWidth">
      <el-row>
        <el-col v-for="item in filteredSearchItems" :key="item.prop" :span="item.col || 8">
          <el-form-item :label="item.label + ':'" :prop="item.prop">
            <jdf-common-input
              v-model="data[item.prop]"
              :elType="item.type ? item.type : 'input'"
              v-bind="item.attrs"
            ></jdf-common-input>
          </el-form-item>
        </el-col>
        <el-col :span="moreBtnList.length > 1 ? 24 : 8">
          <div class="tool-buttons">
            <el-button type="primary" :size="size" @click="onSubmit">查询</el-button>
            <el-button :size="size" @click="resetForm()">重置</el-button>
            <!-- 更多按钮 -->
            <el-button
              v-for="item in moreBtnList"
              :key="item.prop"
              :type="item.type"
              :size="size"
              @click="handleAction(item)"
            >
              {{ item.label }}
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </section>
</template>

<script>
export default {
  name: 'SearchForm',
  props: {
    labelWidth: { type: String, default: 'auto' },
    searchItems: { type: Array, default: () => [] },
    size: { type: String, default: 'small' },
    maxVisibleItems: { type: Number, default: 6 },
    moreBtnList: { type: Array, default: () => [] },
  },
  data() {
    return {
      options: [],
      data: {},
      showMore: false, // 显示更多
    };
  },
  computed: {
    filteredSearchItems() {
      return this.searchItems.filter(
        (item, index) => index < (this.showMore ? this.searchItems.length : this.maxVisibleItems) && this.isVisible(item),
      );
    },
    showMoreBtn() {
      const visibleItems = this.filteredSearchItems;
      return visibleItems.length > this.maxVisibleItems;
    },
    // 计算可见表单项的总span
    visibleItemsSpan() {
      const items = this.showMore ? this.searchItems : this.searchItems.slice(0, 5);
      return items.filter((item) => this.isVisible(item)).reduce((sum, item) => sum + (item.col || 8), 0);
    },
    // 动态计算按钮的offset
    buttonOffset() {
      const remainingSpace = 24 - (this.visibleItemsSpan % 24);
      return remainingSpace >= 8 ? remainingSpace - 8 : 0;
    },
  },
  watch: {
    value: {
      handler() {},
      deep: true,
    },
  },
  created() {
    this.searchItems?.forEach((item) => {
      // 初始化select默认值
      if (item.defaultValue !== undefined) {
        this.$set(this.data, item.prop, item.multiple ? [item.defaultValue] : item.defaultValue);
      } else {
        this.$set(this.data, item.prop, item.multiple ? [] : '');
      }
    });
  },
  mounted() {
    if (this.searchItems && this.searchItems.length > 0) {
      this.searchItems.forEach(() => {});
    }
  },
  methods: {
    more() {
      this.showMore = true;
    },
    hideMore() {
      this.showMore = false;
    },
    resetForm() {
      this.searchItems.forEach((item) => {
        this.$set(this.data, item.prop, item.multiple ? [] : '');
      });
      this.onSubmit();
    },
    onSubmit() {
      this.$emit('refresh', this.data);
    },
    /**
     * 统一按钮方法命名规范
     * @param {Object} btn - 按钮配置对象
     */
    handleAction(btn) {
      btn.methods?.();
    },
    /**
     * 可视化判断逻辑
     * @param {Object} item - 按钮配置项
     */
    isVisible(item) {
      return typeof item.visible === 'function' ? item.visible() : item.visible ?? true;
    },
  },
};
</script>
<style lang="scss">
.search-form {
  background: #fff;
  .el-form-item {
    display: flex;
    margin-bottom: 15px;
    .el-form-item__content {
      flex: 1;
      .el-select {
        width: 100%;
      }
    }
    .jdf-common-input {
      .el-input__inner {
        height: 32px;
        line-height: 32px;
        box-shadow: none;
      }
      .el-date-editor--daterange {
        width: 100%;
      }
    }
  }
  .tool-buttons {
    display: flex;
    justify-content: flex-end;
    .el-button + .el-button {
      margin-left: 10px;
    }
  }
}
</style>
